<template>
	<view class="login" :style="{height:wh+'px'}">
		<!-- 显示上方的图片 -->
		<view class="title">
			<image src="../../static/images/login.jpg" mode="aspectFit"></image>
			<image src="../../static/images/login2.png" mode="aspectFit"></image>
		</view>
		<!-- 下方的表单 -->
		<view class="content">
			<uni-forms ref="logForm" :model="logFormData" :rules="rules" validateTrigger="blur">
				<uni-forms-item name="username">
					<uni-easyinput v-model="logFormData.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput v-model="logFormData.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>

			<button class="button" type="primary" @click="login(logForm)">登录</button>
		</view>
		<!-- 下方的跳转注册 -->
		<view class="register">
			<navigator url="/pages/register/register">还没有账号 ，点击注册</navigator>
		</view>
	</view>
</template>
 <script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		userStore
	} from '../../store/userStrore'
	let store = userStore()
	let wh = computed(() => {
		let h = uni.getWindowInfo().windowHeight
		return h
	})
	const logFormData = ref({
		username: '',
		password: ''
	})
	const rules = ref({
		username: {
			rules: [{
					required: true,
					errorMessage: '请输入用户名'
				},
				{
					minLength: 3,
					maxLength: 10,
					errorMessage: '用户必须在{minLength}到{maxLength}个字符之间'
				}, {
					pattern: '^\\w{3,10}$',
					errorMessage: '请输入3-10位数字字母和下划线作为用户名'
				}
			]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '请输入密码'
			}, {
				pattern: '^[a-zA-Z0-9._!@#$%^&]{3,10}$',
				errorMessage: '请输入3-10位数字字母和特殊字符密码'
			}]
		}
	})
	let logForm = ref(null)
	async function login(logForm) {
			logForm.validate().then(res => {
				// console.log("通过")
				uni.$post("http://59.110.91.222:4000/loginCustomer", res).then(res2 => {
					console.log(res2)
					store.addUserInfo(res2.id, res2.username, res2.email, res2.mobile, res2.token)
					uni.setStorageSync("token", res2.token)
					uni.navigateBack()
				})
			}).catch(err => {
				console.log(err)
			})
		}
</script>
<style scoped >
		
</style>